<template>
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
import 'echarts/map/js/PingDingShan.js'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },
  data() {
    return {
      chart: null,
      myZoom: 0,

      geoCoordMap: {
        // 十三矿: [113.23541867, 33.52453316],
        // 首山一矿: [113.25113207, 33.49020841],
        // 范庄站: [113.27013298, 33.48117652],
        // 八矿: [113.25292312, 33.45138607],
        // 田庄站: [113.21217208, 33.44397939],
        // 申西站: [113.19466578, 33.44516356],
        // 中心站: [113.17531252, 33.45072058],
        // 七矿: [113.15187958, 33.45312012],
        // 五矿: [113.13283491, 33.46586231],
        // 九矿: [113.1147787, 33.47209863],
        // 苗圃站: [113.0811213, 33.48285216],
        // 宝丰站: [113.02300676, 33.5125986],
        // 彭庄站: [113.00185546, 33.51212463],
        // 没粮庙站: [112.5803029, 33.50398941],
        // 军营沟站: [112.53473682, 33.52049692],
        // 大庄站: [112.52472511, 33.52452774],
        // 高庄站: [112.51440991, 33.54033558],
        // 二矿: [113.18118934, 33.4517545],
        // 六矿: [113.14352329, 33.47096297],
        // 鲁阳电厂: [113.00406731, 33.49326134],
        // 十二矿: [113.22126953, 33.45415899],
        // 十矿: [113.20578132, 33.45301349],
        // 十一矿: [113.1017387, 33.48377471],
        // 四矿: [113.16054731, 33.46380612],
        // 一矿: [113.18177073, 33.45470532],
        // 中鸿站: [112.53361672, 33.52355199],

        十三矿: [113.3989852, 33.8792588],
        首山一矿: [113.4198113, 33.8172456],
        范庄站: [113.4503694, 33.8032681],
        八矿: [113.4247864, 33.7538502],
        田庄站: [113.3560336, 33.7443872],
        申西站: [113.3296272, 33.7476766],
        中心站: [113.2980903, 33.7520016],
        七矿: [113.2552211, 33.758667],
        五矿: [113.2245414, 33.7829509],
        九矿: [113.1966075, 33.7891629],
        苗圃站: [113.1364481, 33.8079227],
        宝丰站: [113.0416854, 33.8572183],
        彭庄站: [113.0051541, 33.8559017],
        没粮庙站: [112.9675081, 33.844415],
        军营沟站: [112.8964912, 33.868047],
        大庄站: [112.879792, 33.8792437],
        高庄站: [112.8622498, 33.9009322],

        二矿: [113.30330372222222, 33.75487361111111],
        六矿: [113.24312025, 33.78600825],
        鲁阳电厂: [113.01129808333333, 33.82572594444444],
        十二矿: [113.3701931388889, 33.76155275],
        十矿: [113.34939255555555, 33.75837080555556],
        十一矿: [113.17149638888888, 33.81048530555555],
        四矿: [113.26818697222222, 33.77723922222222],
        一矿: [113.30491869444444, 33.76307033333333],
        中鸿站: [112.89337977777778, 33.876533305555554]
      },

      NullData: [[{ name: '十三矿' }, { name: '十三矿', lineType: 'main', value: 30, stationSize: 20, labelShow: true, color: '#f4d536', labelOffset: [30, 0] }]],
      SSKData: [[{ name: '十三矿' }, { name: '首山一矿', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [-33, 0] }]],
      SSYKData: [[{ name: '首山一矿' }, { name: '范庄站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [30, 0] }]],
      FZZData: [[{ name: '范庄站' }, { name: '八矿', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      BKData: [[{ name: '八矿' }, { name: '田庄站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      TZZData: [[{ name: '田庄站' }, { name: '申西站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      SXZData: [[{ name: '申西站' }, { name: '中心站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      ZXZData: [[{ name: '中心站' }, { name: '七矿', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      QKData: [[{ name: '七矿' }, { name: '五矿', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      WKData: [[{ name: '五矿' }, { name: '九矿', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      JKData: [[{ name: '九矿' }, { name: '苗圃站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      MPZData: [[{ name: '苗圃站' }, { name: '宝丰站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, -20] }]],
      BFZData: [[{ name: '宝丰站' }, { name: '彭庄站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, -20] }]],
      PZZData: [[{ name: '彭庄站' }, { name: '没粮庙站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      MLMZData: [[{ name: '没粮庙站' }, { name: '军营沟站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [0, 20] }]],
      JYGZData: [[{ name: '军营沟站' }, { name: '大庄站', lineType: 'main', value: 30, stationSize: 10, labelShow: false, color: '#f4d536', labelOffset: [-30, 0] }]],
      DZZData: [[{ name: '大庄站' }, { name: '高庄站', lineType: 'main', value: 30, stationSize: 20, labelShow: true, color: '#f4d536', labelOffset: [-30, 0] }]],

      SHKData: [[{ name: '田庄站' }, { name: '十矿', value: 30, stationSize: 5, labelShow: false, color: '#0ef9b8', labelOffset: [0, -10] }]],
      SEKData: [[{ name: '十矿' }, { name: '十二矿', value: 30, stationSize: 5, labelShow: false, color: '#0ef9b8', labelOffset: [0, -10] }]],
      YKData: [[{ name: '申西站' }, { name: '一矿', value: 30, stationSize: 5, labelShow: false, color: '#0ef9b8', labelOffset: [0, -10] }]],
      EKData: [[{ name: '申西站' }, { name: '二矿', value: 30, stationSize: 5, labelShow: false, color: '#0ef9b8', labelOffset: [0, -10] }]],
      SKData: [[{ name: '二矿' }, { name: '四矿', value: 30, stationSize: 5, labelShow: false, color: '#0ef9b8', labelOffset: [0, -10] }]],
      LKData: [[{ name: '二矿' }, { name: '六矿', value: 30, stationSize: 5, labelShow: false, color: '#0ef9b8', labelOffset: [0, -10] }]],
      SYKData: [[{ name: '九矿' }, { name: '十一矿', value: 30, stationSize: 5, labelShow: false, color: '#0ef9b8', labelOffset: [0, -10] }]],
      LYDZData: [[{ name: '彭庄站' }, { name: '鲁阳电厂', value: 30, stationSize: 5, labelShow: false, color: '#0ef9b8', labelOffset: [0, 10] }]],
      ZHZData: [[{ name: '军营沟站' }, { name: '中鸿站', value: 30, stationSize: 5, labelShow: false, color: '#0ef9b8', labelOffset: [10, -5] }]],

      planePath: 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z',

      mainLineColor: ['#f4d536'],
      sideLineColor: ['#0ef9b8'],
      mySeries: []
    }
  },
  mounted() {
    this.initSeries()
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },

  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: function(params, ticket, callback) {
            if (params.seriesType == 'effectScatter') {
              return '站名：' + params.data.name
            } else if (params.seriesType == 'lines') {
              return params.data.fromName + '-' + params.data.toName + '<br />' + '距离：' + params.data.value
            } else {
              return params.name
            }
          }
        },

        geo: {
          map: 'PingDingShan',
          label: {
            emphasis: {
              show: true,
              color: '#fff'
            }
          },
          roam: true,
          //   放大我们的地图
          zoom: 2.9,
          center: [113.1966075, 33.8792588],

          itemStyle: {
            normal: {
              areaColor: '#142957',
              borderColor: '#195BB9',
              borderWidth: 1
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          }
        },
        series: this.mySeries
      })

      this.chart.on('georoam', params => {
        if (params.dy || params.dx) {
          return
        }
        var _option = this.chart.getOption()

        var _zoom = _option.geo[0].zoom
        console.log(_zoom)

        if (this.myZoom === _zoom) {
          return
        }
        this.myZoom = _zoom

        var seriesStations = _option.series.filter(ele => {
          return ele.name.includes('station')
        })
        var seriesLines = _option.series.filter(ele => {
          return ele.name.includes('line')
        })
        if (this.myZoom < 4) {
          seriesStations.forEach(element => {
            if (!(element.name.includes('十三矿') || element.name.includes('高庄站'))) {
              element.label.show = false
            }
          })
        } else if (4 <= this.myZoom && this.myZoom < 5.6) {
          seriesStations.forEach(element => {
            if (!element.name.includes('main')) {
              element.label.show = false
            } else {
              element.label.show = true
            }
          })
        } else {
          seriesStations.forEach(element => {
            element.label.show = true
          })
        }

        console.log(seriesStations[0])
        console.log(_zoom)
        _option.series = _option.series.slice(0, 0)
        seriesStations.forEach(element => {
          _option.series.push(element)
        })
        seriesLines.forEach(element => {
          _option.series.push(element)
        })
        this.chart.clear()
        this.chart.setOption(_option)
      })
    },
    initSeries() {
      const _this = this
      ;[['田庄站', this.NullData], ['十三矿', this.SSKData], ['首山一矿', this.SSYKData], ['范庄站', this.FZZData], ['八矿', this.BKData], ['田庄站', this.TZZData], ['申西站', this.SXZData], ['中心站', this.ZXZData], ['七矿', this.QKData], ['五矿', this.WKData], ['九矿', this.JKData], ['苗圃站', this.MPZData], ['宝丰站', this.BFZData], ['彭庄站', this.PZZData], ['没粮庙站', this.MLMZData], ['军营沟站', this.JYGZData], ['大庄站', this.DZZData], ['田庄站', this.SHKData], ['十矿', this.SEKData], ['申西站', this.YKData], ['申西站', this.EKData], ['二矿', this.SKData], ['二矿', this.LKData], ['九矿', this.SYKData], ['彭庄站', this.LYDZData], ['军营沟站', this.ZHZData]].forEach(function(item, i) {
        _this.mySeries.push(
          {
            name: item[0] + ' line',
            type: 'lines',
            zlevel: 1,
            // effect: {
            //   show: true,
            //   period: 6,
            //   trailLength: 0.7,
            //   color: 'red', //arrow箭头的颜色
            //   symbolSize: 3
            // },
            lineStyle: {
              normal: {
                color: _this.sideLineColor[0],
                width: 0,
                curveness: 0
              }
            },
            data: _this.convertData(item[1])
          },
          {
            name: item[0] + ' line',
            type: 'lines',
            zlevel: 2,
            // symbol: ['none', 'arrow'],
            symbolSize: 5,
            // effect: {
            //   show: true,
            //   period: 6, //箭头指向速度，值越小速度越快
            //   trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
            //   symbol: 'arrow', //箭头图标
            //   symbolSize: 5 //图标大小
            // },
            lineStyle: {
              normal: {
                color: item[1][0][1].color,
                width: 2,
                opacity: 0.6,
                curveness: 0
              }
            },
            data: _this.convertData(item[1])
          },
          {
            name: item[1][0][1].name + '_station_' + item[1][0][1].lineType,
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 5,
            rippleEffect: {
              brushType: 'stroke'
            },
            label: {
              normal: {
                show: item[1][0][1].labelShow,
                position: 'inside',
                offset: item[1][0][1].labelOffset,
                formatter: '{b}',
                color: '#fff',
                textBorderColor: '#fff',
                textBorderWidth: 2,
                textBorderType: 'solid'
              }
            },
            symbolSize: item[1][0][1].stationSize,
            itemStyle: {
              normal: {
                color: item[1][0][1].color
              },
              emphasis: {
                areaColor: '#2B91B7'
              }
            },
            data: item[1].map(function(dataItem) {
              return {
                name: dataItem[1].name,
                value: _this.geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
              }
            })
          }
        )
      })
    },

    // 将指定数据转换为echarts需要的格式
    convertData(data) {
      var res = []
      var _this = this
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i]

        var fromCoord = _this.geoCoordMap[dataItem[0].name]
        var toCoord = _this.geoCoordMap[dataItem[1].name]
        if (fromCoord && toCoord) {
          res.push({
            fromName: dataItem[0].name,
            toName: dataItem[1].name,
            coords: [fromCoord, toCoord],
            value: dataItem[1].value
          })
        }
      }
      return res
    }
  }
}
</script>
